<div class="form-group clearfix">
  <div class="form-inline pull-left">
    <button type="button" class="btn btn-default" (click)="accountModal.show()">新建账号</button>
  </div>
  <div class="form-inline pull-right">
    <select name="account_type" class="form-control">
      <option value="0">管理员账号</option>
      <option value="0">直客账号</option>
    </select>
  </div>
</div>

<div>
  <table class="table">
    <thead>
    <tr>
      <th>序号</th>
      <th>账号名称</th>
      <th>创建时间</th>
      <th>角色</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>
        <div class="checkbox">
          <label><input type="checkbox"></label>
        </div>
      </td>
      <td>李晓盼</td>
      <td>2017-06-26</td>
      <td>商务</td>
      <td>
        <a href="javascript:;" (click)="accountModal.show()">修改权限</a>-
        <a href="javascript:;" (click)="deleteModal.show()">删除</a>
      </td>
    </tr>
    <tr>
      <td>
        <div class="checkbox">
          <label><input type="checkbox"></label>
        </div>
      </td>
      <td>王东初</td>
      <td>2017-06-26</td>
      <td>产品</td>
      <td>
        <a href="javascript:;" (click)="accountModal.show()">修改权限</a>-
        <a href="javascript:;" (click)="deleteModal.show()">删除</a>
      </td>
    </tr>
    <tr>
      <td>
        <div class="checkbox">
          <label><input type="checkbox"></label>
        </div>
      </td>
      <td>郑浩</td>
      <td>2017-06-26</td>
      <td>运营</td>
      <td>
        <a href="javascript:;" (click)="accountModal.show()">修改权限</a>-
        <a href="javascript:;" (click)="deleteModal.show()">删除</a>
      </td>
    </tr>
    <tr>
      <td>
        <div class="checkbox">
          <label><input type="checkbox"></label>
        </div>
      </td>
      <td>乐晓东</td>
      <td>2017-06-26</td>
      <td>超级管理员</td>
      <td>
        <a href="javascript:;" (click)="accountModal.show()">修改权限</a>-
        <a href="javascript:;" (click)="deleteModal.show()">删除</a>
      </td>
    </tr>
    </tbody>
  </table>
  <div class="clearfix">
    <div class="checkbox checkbox-all">
      <label><input type="checkbox">全选</label>
    </div>
    <button type="button" class="btn btn-default" (click)="deleteModal.show()">删除</button>
  </div>
  <div class="text-center">
    <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [(ngModel)]="currentPage"
                previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
  </div>
</div>

<div class="modal fade" bsModal #accountModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新建账号</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="accountModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group clearfix">
            <label class="col-md-2">创建时间</label>
            <div class="col-md-6">
              2017-06-26 15:30
            </div>
          </div>

          <div class="form-group clearfix">
            <label class="col-md-2">账号名称</label>
            <div class="col-md-6">
              <input type="text" class="form-control">
            </div>
          </div>

          <div class="form-group clearfix">
            <label class="col-md-2">密码</label>
            <div class="col-md-6">
              <input type="text" class="form-control">
            </div>
          </div>

          <div class="form-group clearfix">
            <label class="col-md-2">确认密码</label>
            <div class="col-md-6">
              <input type="text" class="form-control">
            </div>
          </div>

          <div class="form-group clearfix">
            <label class="col-md-2">账号角色</label>
            <div class="col-md-6 form-inline">
              <select name="" class="form-control">
                <option value="0">商务</option>
                <option value="0">运营</option>
                <option value="0">产品</option>
                <option value="0">直客</option>
                <option value="0">超级管理员</option>
              </select>
            </div>
          </div>

          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="accountModal.hide()">取消</button>
            <button class="btn btn-success btn-md-long" type="submit">确认</button>
          </div>

        </form>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" bsModal #deleteModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">确认</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="deleteModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>确定删除吗？</p>
        <div class="text-right mt20">
          <button class="btn btn-default btn-md-long" type="button" (click)="deleteModal.hide()">取消</button>
          <button class="btn btn-success btn-md-long" type="button" (click)="deleteModal.hide()">确定</button>
        </div>
      </div>
    </div>
  </div>
</div>
